<template>
<section>
  <el-tabs tab-position="top" @tab-click="tabClick" >
        <el-tab-pane label="员工自主入库审核">
          <div class="assetC">
            <el-col :span="24" style="padding-top:10px;padding-bottom:10px;"> 
            <label>所属公司/部门:</label>
            <el-cascader   
                :options="companyList"
                change-on-select  
                @change="handleItemChange"
                size="small"
                clearable
                v-model="addForm.groupId"
                placeholder="员工所属公司/部门"
                :props="classifyProps">
            </el-cascader> 
            <label>&nbsp;&nbsp;员工姓名:</label>
            <el-input
            class="searchInput"
              size="small"
              placeholder="员工姓名" 
              v-model="addForm.name"
              clearable>
            </el-input>
              <el-button
              @click="searchEmployee(3)"
              round size="small"  plain class="el-icon-search">
                搜索
            </el-button>
            </el-col>
            <el-col :span="24" style="padding-top:0px;padding-bottom:10px;">
              <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain >
                  一键审核<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native = "reviewList(0)">通过所选</el-dropdown-item>
                  <el-dropdown-item @click.native = "reviewList(1)">不通过所选</el-dropdown-item> 
                </el-dropdown-menu>
              </el-dropdown> 
              <el-button round size="small" type="primary"
                plain 
                @click="setEmployeeInboundSelfType"
                class="el-dropdown-link">
                {{setEmployeeInboundSelf==0?'开放员工自主入库':'关闭员工自主入库'}}
              </el-button>
              <el-popover
                placement="top-start"
                title="提示"
                width="220"
                trigger="hover"
                content="开放员工自主入库：员工可通过移动端自主入库资产，管理员审核通过后，即完成资产的入库流程。">
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </el-col>
            <el-table 
            border
            ref="multipleTable"
            :data="useInfo"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="reviewSelectionChange">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="employeeId"
              label="员工编号" 
              width="120px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
              label="员工姓名" 
              width="130px"
              prop="userName" >
            </el-table-column> 
            <el-table-column 
              label="员工手机号" 
              width="130px"
              prop="mobile" >
            </el-table-column> 
            <el-table-column width="1000px" label="待审核的资产(编号，名称，规格，单价，所属公司)">
              <template slot-scope="scope" >
                <table>
                  <tr v-for="item in scope.row.assetInfoList">
                    <td style="min-width:120px">{{item.assetNum}}</td>
                    <td style="min-width:120px">{{item.assetName}}</td>
                    <td style="min-width:120px">{{item.standrad}}</td>
                    <td style="min-width:120px">{{item.unitPrice}}</td>
                    <td style="min-width:220px">{{item.belong}}</td>
                    <td><el-button type="text" size="small">查看</el-button>
                      <el-button type="text" size="small">通过</el-button>
                      <el-button type="text" size="small">不通过</el-button></td>
                  </tr>
                </table>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24" class="toolbar">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNum">
                </el-pagination>
            </el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="员工使用的资产">
          <div class="assetC">
            <el-col :span="24" style="padding-top:10px;padding-bottom:10px;"> 
            <label>所属公司/部门:</label>
            <el-cascader   
                :options="companyList"
                change-on-select  
                @change="handleItemChange"
                size="small"
                clearable
                v-model="addForm.groupId"
                placeholder="员工所属公司/部门"
                :props="classifyProps">
            </el-cascader> 
            <label>&nbsp;&nbsp;员工姓名:</label>
            <el-input
            class="searchInput"
              size="small"
              placeholder="员工姓名" 
              v-model="addForm.name"
              clearable>
            </el-input>
              <el-button
              @click="searchEmployee(2)"
              round size="small"  plain class="el-icon-search">
                搜索
            </el-button>
            <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['fas','sign-out-alt']"/></i>&nbsp;导入/导出
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导入</el-dropdown-item>
                    <el-dropdown-item>导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> 
            </el-col>
            <el-table 
            border
            ref="multipleTable"
            :data="useInfo"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="employeeId"
              label="员工编号" 
              width="120px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
              label="员工姓名" 
              width="130px"
              prop="userName" >
            </el-table-column> 
            <el-table-column 
              label="员工手机号" 
              width="130px"
              prop="mobile" >
            </el-table-column>  
            <el-table-column width="1000px" label="待审核的资产(编号，名称，规格，单价，所属公司)">
                  <template slot-scope="scope" >
                    <table>
                      <tr v-for="item in scope.row.assetInfoList">
                        <td style="min-width:120px">{{item.assetNum}}</td>
                        <td style="min-width:120px">{{item.assetName}}</td>
                        <td style="min-width:120px">{{item.standrad}}</td>
                        <td style="min-width:120px">{{item.unitPrice}}</td>
                        <td style="min-width:220px">{{item.belong}}</td>
                        <td>
                          <el-button type="text" size="small">查看</el-button>
                          <el-button v-show="scope.row.status==3" type="text" size="small">通过</el-button>
                          <el-button v-show="scope.row.status==3" type="text" size="small">不通过</el-button>
                        </td>
                      </tr>
                    </table> 
                  </template>
            </el-table-column>
          </el-table>
          <el-col :span="24" class="toolbar">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNum">
                </el-pagination>
            </el-col>
          </div>
        </el-tab-pane>
  </el-tabs>
</section>
   
</template>

<script>

import api from "@/service/api";
import http from "@/service/http"; 
export default {
  data() {
    return { 
      areaList:[],
      companyList:[],
      addList:[],
      commonSetting:{},
      currentPage:1,
      pageSize:20,
      totalNum:0,
      setEmployeeInboundSelf:0,//设置员工自主入库,0:关闭，1：开放
      addForm:{ 
        name:'', 
        groupId: []//所属公司
      },
      useInfo:[],
      classifyProps: {
        label: "name",
        value: "id",
        children: "child",
        disabled: "disabled"
      },
      rules:{
         areaName : [{
          required: true, message: "请输入名称", trigger: "blur"
        }]
      }
    };
  }, 
  methods: {  
    searchEmployee(statusCode){ 
        var param = { 
          nameStr:this.addForm.name,
          pageNum:this.pageNum,
          status:statusCode,
          pageSize:this.pageSize
        }
        if(this.addForm.groupId && this.addForm.groupId.length != 0){
          param.groupId = this.addForm.groupId[this.addForm.groupId.length-1];
        }
        http.post(api.sysApi.searchEmployeeUseInfo, param).then(data => {
          this.useInfo = data.data;
          this.totalNum = data.totalNum;
        });
    },
     //审核领用单多选
    reviewSelectionChange(val) {
       this.addList = val;
    },
    //审核列表
    reviewList(index){
      if(index <= 1){
        if(this.addList.length==0){
          this.$alert("请选择记录");
          return;
        }else{
          this.reviewAddList(index);
        }
      }
    },
    //根据员工id审核入库资产
    reviewAddList(index){
       let reType = index==0?2:4;
        this.$confirm(index==0?'确定通过所选审核吗?':'确定拒绝所选审核吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => { 
                    let ids = [];
                    this.addList.map((v, k) => {
                      ids.push(v.employeeId);
                    });  
                    http.post(api.sysApi.employeeInboundReview, {assignIds:ids,reviewType:reType,type:2}).then(data => {
                        if(!data.success){
                        return;
                      }
                      this.$message({
                        message: index==0?"已通过":"已拒绝",
                        type: "success"
                      });
                      this.getAssignList();
                    });
                }).catch(() => {}); 
    },
    tabClick(tab){
       this.searchEmployee(tab.index==0?3:2);
    },
    //设置员工自主入库
    setEmployeeInboundSelfType(){
        this.$confirm(this.setEmployeeInboundSelf==0?'确认开放吗?':'确认关闭吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { 
                    this.canEmployeeInboundAdd(this.setEmployeeInboundSelf==0?1:0);
                }).catch(() => {}); 
    },
    handleItemChange(val){
      console.log(val) 
    },
    handleSelectionChange(val){

    },
    handleSizeChange(val){
      this.pageSize = val;
      this.getAreas();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.getAreas();
    },
    handleEdit(index, row) {
        console.log(index, row);
      },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleForce(index, row) {
      console.log(index, row);
    },
    //获取公司部门
    getCompanyList() { 
      http.post(api.sysApi.groupTree, "").then(data => {
        this.companyList = data.data;
      });
    },
     getCommonSetting() { 
      http.post(api.sysApi.getCommonSetting, "").then(data => {
        this.commonSetting = data.data;
        this.setEmployeeInboundSelf = this.commonSetting.canEmployeeInbound;
      });
    },
    canEmployeeInboundAdd(setEmployeeInboundSelf){
      http.post(api.sysApi.canEmployeeInboundAdd, setEmployeeInboundSelf).then(data => {
        if(!data.success){
				return;
			}
         this.$message({
          message: "设置成功",
          type: "success"
        });
        this.getCommonSetting();
      });
    }
  },
  mounted(){
       this.getCompanyList();
       this.searchEmployee(3);
       this.getCommonSetting();
  }
};
</script>

<style>
.el-pagination {
  float: right;
} 
.searchInput {
    width: 200px;
} 
 
.assetC .el-table__row td:nth-of-type(5) .cell{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.assetC .el-table__row td:nth-of-type(5) table{ 
  width:100% !important; 
  border-bottom: 0px !important;
  border-right: 0px !important;
}
/* .assetC .el-table__row td:nth-of-type(5) table tr{
   height: 40px !important;
} */
.assetC .el-table__row td:nth-of-type(5) table td, table th{
  padding: 4px 10px !important;
}
  
</style>
